<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>钉钉官网动画</title>
</head>

<body>
    <div class="header">HEADER</div>
    <div class="playground">
        <div style="font-size: 48px;padding: 70px 0;text-align: center;color: #fff;">哈哈哈生效了</div>
        <div class="animation-container">
            <div class="list">
                <div data-order="0" class="list-item"></div>
                <div data-order="0" class="list-item"></div>
                <div data-order="5" class="list-item"></div>
                <div data-order="0" class="list-item"></div>
                <div data-order="2" class="list-item"></div>
                <div data-order="2" class="list-item"></div>
                <div data-order="1" class="list-item"></div>
                <div data-order="6" class="list-item"></div>
                <div data-order="1" class="list-item"></div>
                <div data-order="4" class="list-item"></div>
               

                <div data-order="0" class="list-item"></div>
                <div data-order="3" class="list-item"></div>
                <div data-order="2" class="list-item"></div>
                <div data-order="0" class="list-item"></div>
                <div data-order="2" class="list-item"></div>
                <div data-order="2" class="list-item"></div>
                <div data-order="1" class="list-item"></div>
                <div data-order="0" class="list-item"></div>
                <div data-order="3" class="list-item"></div>
                <div data-order="1" class="list-item"></div>
            </div>
        </div>
    </div>
    <div class="footer">FOOTER</div>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        :root{
            --width:50px;
            --height: 50px;
        }
        .header,.footer{
            font-size: 48px;
            font-weight: bold;
            text-align: center;
            height: 100vh;
        }
        .playground{
            height:100vh;
            background: #000;
        }
        .animation-container{
            position: sticky;
        }
        .list{
            /* display: flex; */
            flex-wrap: wrap;
        }
        .list-item{
            width: var(--width);
            height: var(--height);
            border-radius: 5px;
            background: #00b845;
            display: inline-block;
            transition: .4s;
        
        }
        .list-item:nth-child(2n+1){
            width: var(--width);
            height: var(--height);
            border-radius: 5px;
            background: #ffa100;
            display: inline-block;
            transition: .4s;
        
        }
        .list-item:nth-child(3n+1){
            width: var(--width);
            height: var(--height);
            border-radius: 5px;
            background: #0476ff;
            display: inline-block;
            transition: .4s;
        }
    </style>
</body>
<script>
    const items = document.querySelectorAll('.list-item')
    const playGround = document.querySelector('.playground')
    const list = document.querySelector('.list')



    function createAnimation(scrollStart, scrollEnd, valueStart, valueEnd) {
        return function (scroll) {
            if (scroll <= scrollStart) {
                return valueStart
            }
            if (scroll >= scrollEnd) {
                return valueEnd
            }
            return (valueStart + (valueEnd - valueStart) * 
            (scroll - scrollStart) / (scrollEnd - scrollStart));
        }
    }


    const animationMap = new Map()

    function updateMap(){
        animationMap.clear();
        const playGroundRect = playGround.getBoundingClientRect();
        const scrollStart = playGroundRect.top+window.scrollY;
        const scrollEnd = playGroundRect.bottom+window.scrollY-window.innerHeight;
        for(const item of items){
            animationMap.set(item,getDomAnimation(scrollStart,scrollEnd,item))
        }
    }

    function getDomAnimation(scrollStart,scrollEnd,dom){
        scrollStart =scrollStart + dom.dataset.order*20
        const opacityAnimation = createAnimation(scrollStart,scrollEnd,0,1)
        const opacity = function(scroll){
            return opacityAnimation(scroll)
        }

        const scaleAnimation = createAnimation(scrollStart,scrollEnd,0.3,1)
        
        const xAnimation = createAnimation(scrollStart,scrollEnd,
        list.clientWidth/2-dom.offsetLeft-dom.clientWidth/2 ,0)
        
        const yAnimation = createAnimation(scrollStart,scrollEnd,
        list.clientHeight/2-dom.offsetTop-dom.clientWidth/2 ,0)


        const transform = function(scroll){
            return `translate(${xAnimation(scroll)}px,${yAnimation(scroll)}px) scale(${scaleAnimation(scroll)})`;
        }
        
        return {
            opacity,
            transform
        }
    }
    function updateStyles() {
        const scroll  = window.scrollY
        for(let [dom,value] of animationMap){
            for(const cssProp in value){
                dom.style[cssProp] = value[cssProp](scroll)
            }
        }
        // let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

        // let scrollHeight = document.documentElement.scrollHeight
        // let clientHeight = document.documentElement.clientHeight
        // if(scrollTop+clientHeight+100 >= scrollHeight){
        //     console.log("滚动到了底部");
        //     window.removeEventListener('scroll',updateStyles)
        // }

    }
    updateMap();
    window.addEventListener('scroll',updateStyles)
</script>

</html>